import { createRouter, createWebHashHistory } from "vue-router";
import { VueRouter } from "./VueRouter";
import { piniaRouter } from "./PiniaRoute";
const routes = [
  {
    path: "/",
    redirect: (to) => {
      return { path: "/CreateNewVue", query: { path: to.path } };
    },
    meta: {
      title: "布局根组件",
      icon: "",
      description: "页面布局，业务上的根组件，支持自动适应浏览器窗口大小",
    },
    name: "home",
    component: () => import("../views/MyLayout.vue"),
    children: [
      /**
       * 合并VueRputer的路由
       */
      ...VueRouter,
      ...piniaRouter,
      {
        meta: {
          title: "创建一个VUE",
          icon: "",
          description: "一个简单的VUE页面",
        },
        path: "CreateNewVue",
        name: "CreateNewVue",
        component: () => import("../views/vue/basic/01_CreateNewVue.vue"),
      },
      {
        meta: {
          title: "模板语法",
          icon: "",
          description: "简单的模板语法",
        },
        path: "templateVue",
        name: "templateVue",
        component: () => import("../views/vue/basic/02_TemplateVue.vue"),
      },
      {
        meta: {
          title: "响应式基础",
          icon: "",
          description: "响应式基础",
        },
        path: "ResponsiveFoundation",
        name: "ResponsiveFoundation",
        component: () =>
          import("../views/vue/basic/03_ResponsiveFoundation.vue"),
      },
      {
        meta: {
          title: "计算属性",
          icon: "",
          description: "计算属性",
        },
        path: "ComputedVue",
        name: "ComputedVue",
        component: () => import("../views/vue/basic/04_ComputedVue.vue"),
      },
      {
        meta: {
          title: "类与样式绑定",
          icon: "",
          description: "类与样式绑定",
        },
        path: "ClassStyleVue",
        name: "ClassStyleVue",
        component: () => import("../views/vue/basic/05_ClassStyleVue.vue"),
      },
      {
        meta: {
          title: "条件渲染",
          icon: "",
          description: "条件渲染",
        },
        path: "ConditionalRendering",
        name: "ConditionalRendering",
        component: () =>
          import("../views/vue/basic/06_ConditionalRendering.vue"),
      },
      {
        meta: {
          title: "列表渲染",
          icon: "",
          description: "列表渲染",
        },
        path: "ListRendering",
        name: "ListRendering",
        component: () => import("../views/vue/basic/07_ListRendering.vue"),
      },
      {
        meta: {
          title: "事件处理",
          icon: "",
          description: "事件处理",
        },
        path: "EventProcessing",
        name: "EventProcessing",
        component: () => import("../views/vue/basic/08_EventProcessing.vue"),
      },
      {
        meta: {
          title: "表单输入绑定",
          icon: "",
          description: "表单输入绑定",
        },
        path: "FormBinding",
        name: "FormBinding",
        component: () => import("../views/vue/basic/09_FormBinding.vue"),
      },
      {
        meta: {
          title: "生命周期",
          icon: "",
          description: "生命周期",
        },
        path: "LifeCycle",
        name: "LifeCycle",
        component: () => import("../views/vue/basic/10_LifeCycle.vue"),
      },
      {
        meta: {
          title: "监听器",
          icon: "",
          description: "监听器",
        },
        path: "WatchVue",
        name: "WatchVue",
        component: () => import("../views/vue/basic/11_WatchVue.vue"),
      },
      {
        meta: {
          title: "模板引用",
          icon: "",
          description: "模板引用",
        },
        path: "TemplateReferenceVue",
        name: "TemplateReferenceVue",
        component: () =>
          import("../views/vue/basic/12_TemplateReferenceVue.vue"),
      },
      {
        meta: {
          title: "组件基础",
          icon: "",
          description: "组件基础",
        },
        path: "ComponentParent",
        name: "ComponentParent",
        component: () =>
          import("../views/vue/basic/13_ComponentVue/ComponentParent.vue"),
      },
      {
        meta: {
          title: "注册",
          icon: "",
          description: "注册",
        },
        path: "RegisterVue",
        name: "RegisterVue",
        component: () =>
          import(
            "../views/vue/deep-component/01_RegisterVue/01_RegisterVue.vue"
          ),
      },
      {
        meta: {
          title: "props",
          icon: "",
          description: "props",
        },
        path: "propsVue",
        name: "propsVue",
        component: () =>
          import("../views/vue/deep-component/02_props/ParentVue.vue"),
      },
      {
        meta: {
          title: "事件",
          icon: "事件",
          description: "事件",
        },
        path: "eventVue",
        name: "eventVue",
        component: () =>
          import("../views/vue/deep-component/03_event/ParentVue.vue"),
      },
      {
        meta: {
          title: "组件 v-model",
          icon: "组件 v-model",
          description: "组件 v-model",
        },
        path: "ModelVue",
        name: "ModelVue",
        component: () =>
          import("../views/vue/deep-component/04_v-model/V-ModelVue.vue"),
      },
      {
        meta: {
          title: "透传 Attrbuites",
          icon: "透传 Attrbuites",
          description: "透传 Attrbuites",
        },
        path: "PenetrateAttrbuitesVue",
        name: "PenetrateAttrbuitesVue",
        component: () =>
          import(
            "../views/vue/deep-component/05_penetrateAttributes/PenetrateAttrbuitesVue.vue"
          ),
      },
      {
        meta: {
          title: "插槽 slots",
          icon: "插槽 slots",
          description: "透传 Attrbuites",
        },
        path: "slotsVue",
        name: "slotsVue",
        component: () =>
          import("../views/vue/deep-component/06_slots/ParentVue.vue"),
      },
      {
        meta: {
          title: "依赖注入",
          icon: "依赖注入",
          description: "依赖注入",
        },
        path: "DependencyInjection",
        name: "DependencyInjection",
        component: () =>
          import("../views/vue/deep-component/07_DependencyInjection/AVue.vue"),
      },
      {
        meta: {
          title: "异步组件",
          icon: "异步组件",
          description: "异步组件",
        },
        path: "DefineComponentVue",
        name: "DefineComponentVue",
        component: () =>
          import(
            "../views/vue/deep-component/08_defineComponent/DefineComponentVue.vue"
          ),
      },
      {
        meta: {
          title: "组合式函数",
          icon: "组合式函数",
          description: "组合式函数",
        },
        path: "ComposablesVue",
        name: "ComposablesVue",
        component: () =>
          import(
            "../views/vue/logical-reuse/01_composables/ComposablesVue.vue"
          ),
      },
      {
        meta: {
          title: "自定义指令",
          icon: "自定义指令",
          description: "自定义指令",
        },
        path: "CustomDirectivesVue",
        name: "CustomDirectivesVue",
        component: () =>
          import(
            "../views/vue/logical-reuse/02_custom-directives/CustomDirectivesVue.vue"
          ),
      },
      {
        meta: {
          title: "自定义插件",
          icon: "自定义插件",
          description: "自定义插件",
        },
        path: "plugins",
        name: "plugins",
        component: () =>
          import("../views/vue/logical-reuse/03_plugins/PluginsVue.vue"),
      },
      {
        meta: {
          title: "动画",
          icon: "动画",
          description: "动画",
        },
        path: "TransitionVue",
        name: "TransitionVue",
        component: () =>
          import(
            "../views/vue/built-component/01_transition/TransitionVue.vue"
          ),
      },
      {
        meta: {
          title: "KeepAlive",
          icon: "KeepAlive",
          description: "KeepAlive",
        },
        path: "KeepAliveVue",
        name: "KeepAliveVue",
        component: () =>
          import("../views/vue/built-component/02_KeepAlive/KeepAliveVue.vue"),
      },
      {
        meta: {
          title: "Teleport",
          icon: "Teleport",
          description: "Teleport",
        },
        path: "TeleportVue",
        name: "TeleportVue",
        component: () =>
          import("../views/vue/built-component/03_Teleport/TeleportVue.vue"),
      },
      {
        meta: {
          title: "SuspenseVue",
          icon: "SuspenseVue",
          description: "SuspenseVue",
        },
        path: "SuspenseVue",
        name: "SuspenseVue",
        component: () =>
          import("../views/vue/built-component/04_ Suspense/SuspenseVue.vue"),
      },
      {
        meta: {
          title: "StateManagement",
          icon: "StateManagement",
          description: "StateManagement",
        },
        path: "StateManagement",
        name: "StateManagement",
        component: () =>
          import(
            "../views/vue/application-scale/01_StateManagement/StateManagement.vue"
          ),
      },
      {
        meta: {
          title: "Deep response system",
          icon: "Deep response system",
          description: "Deep response system",
        },
        path: "DeepResponseSystem",
        name: "DeepResponseSystem",
        component: () =>
          import(
            "../views/vue/advanced-topic/01_DeepResponseSystem/DeepResponseSystemVue.vue"
          ),
      },
      {
        meta: {
          title: "CreateVnodeVue",
          icon: "CreateVnodeVue",
          description: "CreateVnodeVue",
        },
        path: "CreateVnodeVue",
        name: "CreateVnodeVue",
        component: () =>
          import(
            "../views/vue/advanced-topic/02_ CreateVnode/CreateVnodeVue.vue"
          ),
      },
    ],
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,

  /**
   * https://github.com/vuejs/vue-router/issues/675
   * Hooking into transitions involves too many intricacies and depends on custom transition implementations,
   * so vue-router is not going to support that as a built-in.
   * It's possible to implement your own transition component for that purpose though.
   */
  // eslint-disable-next-line no-unused-vars
  scrollBehavior(to, from, savedPosition) {
    if (to.path == "/ScrollBehavior") {
      return {
        // el: document.getElementById("45"),
        top: -100,
      };
    }
  },
});

// router.beforeEach((to, from, next) => {
//   localStorage.setItem("now", new Date());
//   next();
// });
/**
 * 也可以不写next,只要不返回 false 既可正常跳转
 */
router.beforeEach(() => {
  localStorage.setItem("now", new Date());
});

// router.afterEach((to, from) => {
//   console.log(to.fullPath);
//   console.log(from.fullPath);
// });

export default router;
